<template>
	<view>
		<view style="margin-top: 28rpx;margin-left: 20rpx;">
			<view class="tui-flex-box">
				<view class="tui-left tui-col-12 ">
					<text v-text="topic.title" style="font-size: 35rpx;font-weight: 510;display: flex;"></text>
				</view>
				
				<view class="tui-left tui-col-12" style="margin-top: 20rpx;display: flex;width: 50%; color: #666666;font-size: 22rpx;">
					<!-- relativeTimeGetter.getText(topic.createTime) -->
					<text v-text="topic.createTime"></text>
				</view>

				<view class="tui-left tui-col-12" style="margin-top: 20rpx;flex-wrap: nowrap;display: flex;">
					<navigator :url="'/pages/user/user?id=' + topic.memberId" hover-class='none' >
						<view class="tui-flex" style="height: 60rpx;display: flex;">
							<image :src="topic.memberAvatar" mode="widthFix" style="width: 60rpx;border-radius: 60rpx;">
							</image>
							<text
								style="font-size: 30rpx;margin-left: 20rpx;color: #00C0FB;display: flex;align-items: center;justify-content: center;">{{topic.memberNickname}}</text>
						</view>
					</navigator>
					
					<view class="buttons tui-flex" v-if="!isMe">


						<tui-button
						v-show="userInfo.isFollow" 
						plain margin="0 10rpx 26rpx 0" type="gray" shape="circle" width="120rpx" height="35rpx" :size="32" 
						@click="cancelFollow()">
							已关注
						</tui-button>


					</view>
<<<<<<< HEAD

=======
>>>>>>> 186f56b7d8cf9938a1eca9dee0baaa69cf16ead2
				</view>


				<view class="tui-left tui-col-12" style="margin-top: 30rpx;">
					<view class="ql-container">
						<mp-html :content="topic.content" class="ql-editor" />
					</view>
					<!-- <rich-text type="text" :nodes="topic.content"></rich-text> -->
				</view>
				
				<view  v-if="topic.copyright == 0"  class="tui-left tui-col-12"
					style="margin-top: 50rpx;font-size: 15rpx;color: #555555">
					<tui-icon :name="'warning'" :size="15" :color="'#555555'"></tui-icon>
					<text>
						本文由楼主发布在小牛社区,未经楼主许可,禁止转载
					</text>
				</view>

				<view class="tui-left tui-col-12"
					style="display: flex;flex-wrap: nowrap; width: 100%;margin-top: 30rpx;">
					
					<view class="tui-left tui-col-6"></view>
					
					<view class="tui-left tui-col-6"
						style="display: flex;margin-right: 30rpx;font-size: 18rpx;justify-content: flex-end;width: 50%;">

						<view>
							<tui-icon :name="'message'" :size="18" :color="'#666666'"></tui-icon>
							<text v-text=" topic.replyCount"></text>
						</view>

						<view style="margin-left: 30rpx;">
							<tui-icon :name="'agree'" :size="18" :color="'#666666'"></tui-icon>
							<text v-text="topic.praiseCount"> </text>
						</view>
					</view>
				</view>

				<view class="tui-left tui-col-12"
					style="display: flex;margin-top: 20rpx;height: 1rpx;background-color: #666666;margin-left: -20rpx;">

				</view>

				<view class="tui-left tui-col-12"
					style="display: flex;height: 45rpx;background-color: #F5F5F5;margin-left: -20rpx;">

				</view>
			</view>

			<view class="tui-cmt-title" v-text="'精彩评论 ('+ (topic.replyCount ? topic.replyCount : 0 )+')'"></view>


			<view class="container" style="margin-left: 0;">

				<view class="tui-cells" style="margin-left: -30rpx; width: 100%;">
					<textarea ref='textareaFormRef' @blur="textareaFocus = false" :focus="textareaFocus"
						v-model="commentForm.content" class="tui-textarea" name="desc" :placeholder="commentTips"
						maxlength="500" placeholder-class="tui-phcolor-color" />
					<view class="tui-textarea-counter">{{commentForm.content.length}}/500</view>
				</view>

				<view class="tui-cmt-btn" style="margin-left: -20rpx;">
					<tui-button shape="circle" @click="commentSubmit()">发表</tui-button>
				</view>
			</view>

			<view class="tui-cmtbox" v-if="commentList">
				<view class="tui-cmt-cell" v-for="(item, index) in commentList" :key="index">
					<navigator :url="'/pages/user/user?id=' + item.parent.memberId">
						<image :src="item.parent.memberAvatar" class="tui-avatar"></image>
					</navigator>
					<view class="tui-cmt-detail">
						<view class="tui-header-box">
							<navigator :url="'/pages/user/user?id=' + item.parent.memberId">
								<view class="tui-cmt-nickname">{{ item.parent.memberNickname }}</view>
							</navigator>
							
							<!-- 							<view class="tui-fabulous" :class="[item.isFabulous ? 'tui-primary' : '']" :id="index" @tap="cmtFabulous">
								<text>{{ item.fabulous == 0 ? '赞' : item.fabulous }}</text>
								<tui-icon :name="iconName(item.isFabulous)" :size="15" :color="itemIconColor(item.isFabulous)"></tui-icon>
							</view> -->
						</view>
						<view class="tui-cmt-content">{{ item.parent.content }}</view>

						<view class="tui-footer">
							<view v-text="relativeTimeGetter.getText(item.parent.createTime)"></view>

							<!-- <view v-if="replyInputVisible && index==replyIndex">
								<input type="text" v-model="commentForm.content" :focus='setFocus' style="border: 1rpx #000000 solid; margin-left: 20rpx;"/>
							</view>
							 -->
							<view class="tui-primary tui-ml" hover-class="opcity" :hover-start-time="150"
								@click="replyClickHandler(index,item.parent.id,item.parent.memberNickname)">回复</view>
							<view v-if="replyIndex == index" class="tui-primary tui-ml" hover-class="opcity"
								:hover-start-time="150" @click="replyColseHandler()">取消</view>
						</view>
						<view class="tui-reply-box" v-if="item.children.length > 0">
							<tui-list-cell backgroundColor="#f2f2f2" :size="28" v-for="(items, index2) in item.children"
								:key="index2" :unlined="item.children.length < 2 && item.children.length - 1 == index"
								>

								<view class="tui-flex-1 tui-reply-nickname">
									{{ items.memberNickname }}
									<text v-text="' '"></text>
									<block v-if="items.backMemberId">回复</block>
									<text v-text="' '"></text>
									{{items.backMemberNickname}}
								</view>
								<view class="tui-flex-1">{{ items.content }}</view>

								<view class="tui-children-footer">
									<view v-text="relativeTimeGetter.getText(item.parent.createTime)"></view>

									<!-- 								<view v-if="replyInputVisible && index==replyIndex">
									<input type="text" v-model="commentForm.content" :focus='setFocus' style="border: 1rpx #000000 solid; margin-left: 20rpx;"/>
								</view>
								 -->
									<view class="tui-primary tui-ml" hover-class="opcity" :hover-start-time="150"
										@click="replyClickHandler(index,item.parent.id,items.memberNickname,items.memberId)">
										回复</view>

								</view>


							</tui-list-cell>

							<tui-list-cell padding="20rpx 30rpx" backgroundColor="#f2f2f2" :size="28" :unlined="true"
								v-if="item.backCount > 2" @tap="infoClick(item.parent.id)">
								<view class="tui-flex-1  tui-cell-last">
									<text>共{{ item.backCount }}条回复</text>
									<tui-icon name="arrowright" :size="22" color="#5677fc"></tui-icon>
								</view>
							</tui-list-cell>
						</view>




					</view>
				</view>
				<view style="width: 100%;height: 120rpx;"></view>
			</view>

			<view v-else>
				<view style="height: 50rpx;"></view>
				<tui-no-data :fixed="false" imgUrl="/static/images/toast/img_nodata.png">暂无评论数据</tui-no-data>
				<view style="height: 150rpx;"></view>
			</view>

			<view class="tui-operation">

				<!-- <view class="tui-operation-left tui-col-6" >
					<view class="tui-btn-comment" style="color: #008000;" @tap="btnCmt">
						<input  ref="contentInput"  v-model="commentForm.content"  placeholder="请输入评论内容" />
					</view>
				</view> -->

				<!-- <view class="tui-operation-left tui-col-1" >
					<tui-button width="100rpx" height="60rpx"  @click="commentSubmit()">评论</tui-button>
					
				</view> -->

				<!-- <view class="tui-operation-right tui-right-flex tui-col-5">
					<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @tap="cmtAll">
						<tui-icon name="message" :size="30" color="#444"></tui-icon>
						<tui-badge absolute type="white_primary" :scaleRatio="0.7">501</tui-badge>
					</view>
					<view class="tui-operation-item" @tap="collection">
						<tui-icon :name="isCollection ? 'star-fill' : 'star'" :size="29" :color="isCollection ? '#5677fc' : '#444'"></tui-icon>
					</view>
					
				</view> -->
				<!--居中消息-->
				<tui-tips position="center" ref="toast"></tui-tips>
				<!--居中消息-->
			</view>

		</view>
	</view>


</template>

<script>
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import communityApi from '@/request/api/communityApi.js'
	import relativeTimeGetter from "@/utils/RelativeTimeGetter.js"
	import userUtils from "@/utils/userUtils.js"


	export default {
		components: {
			mpHtml: mpHtml
		},
		data() {
			return {
				pageParams: {
					pageIndex: 1,
					pageSize: 10,
					pageTotal: '',
					totalCount: '',
				},
				topicId: '',
				topic: '',
				commentList: [],
				relativeTimeGetter: relativeTimeGetter,
				commentForm: {
					content: '',
					parentId: '',
					topicId: '',
					backMemberId: '',
					memberId: '',
				},
				commentCount: '',
				commentTips: '发表你的评论...',
				textareaFocus: false,
				replyInputVisible: false,
				replyIndex: -1,
				endline: false,
				isMe:false, //是不是当前登录用户的个人页
				userInfo:{
					nickname:'',  //用户昵称
					signature:'', //个性签名
					avatar:'',
					followNum:0, //关注数
					fansNum:0,       //粉丝数
					isFollow:false
				},
			}
		},
		onLoad(params) {

			this.topicId = params.topicId;
			communityApi.getTopicInfoByTopicId(this.topicId).then(response => {

				this.topic = response.data
			})

			this.getTopicCommentByTopicId()
		},
		methods: {
			// 页面上拉触底事件的处理函数
			onReachBottom: function() {
				if (this.pageParams.pageTotal == this.pageParams.pageIndex) {
					return;
				}
				this.endline = false;

				this.pageParams.pageIndex += 1;
				this.getTopicCommentByTopicId();

			},
			getTopicCommentByTopicId() {
				communityApi.getTopicCommentByTopicId(this.topicId, this.pageParams).then(response => {

					this.commentList = [...this.commentList, ...response.data.list]
					this.pageParams.totalCount = response.data.totalCount
					this.pageParams.pageSize = response.data.pageSize
					this.pageParams.pageIndex = response.data.currPage
					this.pageParams.pageTotal = response.data.totalPage
				})
			},

			commentSubmit() {
				if(!this.commentForm.content){
					let options = {
						msg: "评论内容不能为空",
						duration: 2000,
						type: 'type'
					};
					this.$refs.toast.showTips(options);
					return;
				}
				userUtils.loginCheck().then(user => {
					this.commentForm.memberId = user.id
					this.commentForm.topicId = this.topicId
					communityApi.saveComment(this.commentForm).then(response => {
						if (response.code == 0) {
							uni.showToast({
								title: "评论成功,请等待审核!!"
							})
							this.commentForm.content = ""
						}
					})
				})

			},
			//点击回复回调函数
			replyClickHandler(index, parentId, nickname, backId) {
				this.commentTips = "回复  " + nickname
				this.textareaFocus = true;
				this.commentForm.parentId = parentId;
				if (backId) {
					this.commentForm.backMemberId = backId;
				}

			},
			replyColseHandler() {
				this.commentForm.content = ""
				this.setFocus = false;
				this.replyInputVisible = false;
				this.replyIndex = -1
			},
			infoClick(id){
				console.log(id)
				uni.navigateTo({
					url:'commentInfo?commentId=' + id,
				})
			}

		}
	}
</script>

<style>
	@import url("@/static/style/rich_text.css");
	
	.buttons{
		
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left:auto;
		
		
				
	}

	.container {
		padding: 40rpx 30rpx 110rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-news-title {
		font-size: 48rpx;
		font-weight: 500;
		text-align: justify;
	}

	.tui-sub-info {
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #999;
	}

	.tui-author {
		color: #5677fc;
		padding-right: 20rpx;
	}

	.tui-news-content {
		padding-top: 40rpx;
	}

	.tui-article {
		/* text-indent: 2em; */
		font-size: 34rpx;
		padding-bottom: 40rpx;
		line-height: 60rpx;
		text-align: justify;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-article-pic {
		width: 100%;
		display: block;
		margin-bottom: 40rpx;
	}

	.tui-news-source {
		font-size: 24rpx;
		color: #999;
	}

	.tui-operate-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
	}

	.tui-black {
		color: #333;
		padding-left: 12rpx;
	}

	.tui-cmt-title {
		font-size: 30rpx;
		font-weight: bold;
		position: relative;
	}

	.tui-cmt-title::after {
		content: '';
		position: absolute;
		left: -18rpx;
		top: 18%;
		width: 6rpx;
		height: 64%;
		background: #5677fc;
	}

	.tui-cmtbox {
		padding-bottom: 20rpx;
	}

	.tui-cmt-cell {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding-top: 44rpx;
	}

	.tui-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-cmt-detail {
		width: 100%;
		padding-left: 16rpx;
		box-sizing: border-box;
	}

	.tui-header-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.tui-cmt-nickname {
		color: #CD1225;
	}

	.tui-fabulous {
		color: #9a9a9a;
	}

	.tui-fabulous text {
		padding-right: 4rpx;
		font-size: 24rpx;
	}

	.tui-cmt-content {
		font-size: 32rpx;
		color: #333;
		text-align: justify;
		padding-top: 8rpx;
		word-break: break-all;
		word-wrap: break-word;
		width: 90%;
	}

	.tui-reply-box {
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 16rpx;
	}

	.tui-cell-last {
		display: flex;
		align-items: center;
		word-wrap: break-word;
		color: #5677fc;
	}

	.tui-flex-1 {
		flex: 1;
		width: 100%;
	}

	.tui-reply-nickname {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-bottom: 8rpx;
	}

	.tui-footer {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-top: 16rpx;
		color: #9a9a9a;
	}

	.tui-children-footer {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		margin-top: 16rpx;
		color: #9a9a9a;
	}

	.tui-primary {
		color: #5677fc !important;
	}

	.tui-ml {
		margin-left: 16rpx;
	}

	.tui-operation {
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-operation-right {
		height: 100rpx;
		box-sizing: border-box;
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-btn-comment {
		height: 64rpx;
		width: 90%;
		background: #ededed;
		color: #999;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		padding-top: 0;
		margin-left: 10rpx;
	}

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-share-btn {
		display: block;
		background: none;
		margin: 0;
		padding: 0;
	}

	.tui-list-cell {
		width: 90%;
	}

	page {
		background: #fff;
		color: #333;
	}

	.container {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.tui-cells {
		border-radius: 4rpx;
		height: 280rpx;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0 20rpx;
		position: relative;
		margin-top: 20rpx;
	}

	.tui-cells::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1px solid #e6e6e6;
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 1;
		top: 0;
		border-radius: 8rpx;
		pointer-events: none;
	}

	.tui-textarea {
		height: 210rpx;
		width: 100%;
		color: #666;
		font-size: 28rpx;
	}

	.tui-phcolor-color {
		color: #ccc !important;
	}

	.tui-textarea-counter {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		height: 40rpx;
		line-height: 40rpx;
		padding-top: 4rpx;
	}

	.tui-enclosure {
		display: flex;
		align-items: center;
		padding: 26rpx 10rpx;
		box-sizing: border-box;
	}

	.tui-cmt-btn {
		margin-top: 20rpx;
	}
</style>
